import { type App } from "vue";
import ElContainer from "./Container.vue";
import ElHeader from "./Header.vue";
import ElFooter from "./Footer.vue";
import ElAside from "./Aside.vue";
import ElMain from "./Main.vue";

export default {
  // TypeScript 报错「Argument of type 'string | undefined' is
  // not assignable to parameter of type 'string'」的根本原因是:
  // Vue 3 组件的 name属性在 TypeScript 类型定义中是可选的（string | undefined）,
  // 但 app.component()方法要求第一个参数必须是 string类型
  // 在你的 Container.vue中，虽然使用了 defineOptions({ name: "ElContainer" })设置了名称，
  // 但 TypeScript 无法确定运行时 name属性一定存在。

  // 方案一：使用非空断言（推荐）
  // 最简单的解决方法是使用 TypeScript 的非空断言操作符 !：
  install(app: App) {
    app.component(ElContainer.name!, ElContainer);
    app.component(ElHeader.name!, ElHeader);
    app.component(ElFooter.name!, ElFooter);
    app.component(ElAside.name!, ElAside);
    app.component(ElMain.name!, ElMain);
  },

  // 方案二：显式类型守卫
  // 如果需要更安全的类型检查，可以添加运行时验证
  // install(app: App) {
  //   const components = [
  //     { component: ElContainer, name: ElContainer.name },
  //     { component: ElHeader, name: ElHeader.name },
  //     { component: ElFooter, name: ElFooter.name },
  //     { component: ElAside, name: ElAside.name },
  //     { component: ElMain, name: ElMain.name },
  //   ];
  //   components.forEach(({ component, name }) => {
  //     if (!name) {
  //       console.warn(`Component ${component.__file} has no name property`);
  //       return;
  //     }
  //     app.component(name, component);
  //   });
  // },
};
